<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>实现图像传送带</title>
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<style type="text/css">
a img {
  border: 0;	/*无边框*/
}
#container {
  position: relative;	/*设置相对布局*/
  background: #E0F0FB;	/*设置背景颜色*/
  width: 240px;			/*设置宽度*/
  height: 70px;			/*设置高度*/
  margin: 1px auto;		/*设置外边距*/
  padding: 0;			/*设置内边距*/
  border:1px solid #A1D6FE; /*设置边框*/
  z-index: 2;			/*设置层叠次序*/
}
#container .box {
  position: relative;	/*设置相对布局*/
  width: 480px;
  z-index: 3;			/*设置层叠次序*/
}
#container a {
  float: left;			/*设置浮动在左边*/
  margin: 5px 0px 5px 5px;		/*设置外边距*/
  height: 58px;
}

#container .control {
  position: absolute;	/*设置绝对布局*/
  z-index: 3;			/*设置层叠次序*/
  left: 0;				/*设置左边距*/
  top: 0;				/*设置顶边距*/
}
</style>
<script type="text/javascript">
$(document).ready(function() {
  var spacing = 90;						//定义保存间距的变量
  function createControl(src) {		//定义创建控制图片的函数
    return $('<img/>')
      .attr('src', src)				//设置图片的来源
	  .attr("width",80)
	  .attr("height",60)
      .addClass('control')
      .css('opacity', 0.6)			//设置透明度
      .css('display', 'none');			//默认为不显示
  }
      
  var $leftRollover = createControl('images/left.gif');	//创建向左移动的控制图片
  var $rightRollover = createControl('images/right.gif');	//创建向左移动的控制图片

  $('#container').css({								//改变图像传送带容器的CSS样式
    'width': spacing * 3,
    'height': '70px',
    'overflow': 'hidden'								//溢出时隐藏
  }).find('.box a').css({
    'float': 'none',
    'position': 'absolute',							//设置为绝对布局
    'left': 1000									//将左边距设置为1000，目的是不显示
  });

  var setUpbox = function() {
    var $box = $('#container .box a');
    $box.unbind('click mouseenter mouseleave');		//移除绑定的事件

    /******************************左边的图片*************************************/
    $box.eq(0)
      .css('left', 0)
      .click(function(event) {
        $box.eq(0).animate({'left': spacing}, 'fast');		//为第一张图片添加动画
        $box.eq(1).animate({'left': spacing * 2}, 'fast');	//为第二张图片添加动画
        $box.eq(2).animate({'left': spacing * 3}, 'fast');	//为第三张图片添加动画
        $box.eq($box.length - 1)
          .css('left', -spacing)						//设置左边距
          .animate({'left': 0}, 'fast', function() {
            $(this).prependTo('#container .box');
            setUpbox();
          });									//添加动画

        event.preventDefault();						//取消事件的默认动作
      }).hover(function() {							//设置鼠标的悬停事件
        $leftRollover.appendTo(this).fadeIn(200);		//显示向左移动的控制图片
      }, function() {
        $leftRollover.fadeOut(200);					//隐藏向左移动的控制图片
      });

    /******************************右边的图片**************************************/
    $box.eq(2)
      .css('left', spacing * 2)	//设置左边距
      .click(function(event) {	//绑定单击事件
        $box.eq(0)			//获取左边的图片，也就是第一张图片
          .animate({'left': -spacing}, 'fast', function() {
            $(this).appendTo('#container .box');	
            setUpbox();
          });									//添加动画
        $box.eq(1).animate({'left': 0}, 'fast');//添加动画
        $box.eq(2).animate({'left': spacing}, 'fast');//添加动画
        $box.eq(3)
          .css('left', spacing * 3)					//设置左边距
          .animate({'left': spacing * 2}, 'fast');	//添加动画

        event.preventDefault();		//取消事件的默认动作
      }).hover(function() {			//设置鼠标的悬停事件
        $rightRollover.appendTo(this).fadeIn(200);	//显示向右移动的控制图片
      }, function() {
        $rightRollover.fadeOut(200);		//隐藏向右移动的控制图片
      });

    /************************中间的图片*****************************************/
    $box.eq(1).css('left', spacing);	//设置中间图片的左边距
      };
  setUpbox();
  $("a").attr("target","_blank");	//查看原图时，在新的窗口中打开
});

</script>

</head>

<body>
<div id="container">
<div class="box">
    <a href="images/01.jpg"><img height=60 src="images/01.jpg" width=80></a>
    <a href="images/02.jpg"><img height=60 src="images/02.jpg" width=80></a>
    <a href="images/03.jpg"><img height=60 src="images/03.jpg" width=80></a>
    <a href="images/04.jpg"><img height=60 src="images/04.jpg" width=80></a>
    <a href="images/05.jpg"><img height=60 src="images/05.jpg" width=80></a>
    <a href="images/06.jpg"><img height=60 src="images/03.jpg" width=80></a>
</div>
</div>
</body>
</html>
